<template>
  <div class="system-packages" v-loading="loading">
    <div v-if="packageList.length === 0 && !loading" class="empty-data">
      <el-empty description="暂无套餐数据" />
    </div>
    
    <div v-else>
      <el-collapse v-model="activeCollapse">
        <system-package-card
          v-for="(system, index) in packageList"
          :key="system.id"
          :system="system"
          :index="index"
          @add-package="$emit('add-package', system)"
          @delete-system="$emit('delete-system', system)"
          @edit-package="$emit('edit-package', $event)"
          @remove-package="$emit('remove-package', $event)"
        />
      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SystemPackageCard from './SystemPackageCard.vue'

defineProps({
  packageList: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})

defineEmits(['add-package', 'delete-system', 'edit-package', 'remove-package'])

const activeCollapse = ref([0]) // 默认展开第一个
</script>

<style lang="scss" scoped>
.system-packages {
  margin-top: 20px;
}

.empty-data {
  margin: 40px 0;
  text-align: center;
}
</style> 